<head> 
    <title>TU Braunschweig mobil</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=no;" />       
    <link rel="shortcut icon" href="themes/images/TUBS_FavIcon.ico" type="image/ico" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <link rel="stylesheet" href="themes/TU-BS.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script type="text/javascript">
        //Funktion für das dynamische Laden der Mensen
        //simulieren der $(document).ready(function()});
        //javascript wird beim initialisieren der Seite mit jquerymbile ajax geladen 
        $('#mensa').live('pageinit', function(event) {
            //Die navigationsbar reagiert auf clicks, 
            //das jeweilige Datenattribut wird in eine Variable übergeben
            $('#mensa div[data-role="navbar"] a').click(function() {
                var show = $(this).data('show');
                //Iteration über alle div Elemente innerhalb des div-content containers
                //Dabei Abgleich des Classenamens mit dem Datenattribut aus der show Variable
                $('#mensa div[data-role="content"] > div').each(function(){
                    if($(this).hasClass(show)) {
                        //Anzeigen
                        $(this).show(1000);                       
                    } else {
                        //Ausblenden
                        $(this).hide(1000);
                    }
                })
            });
        });
        //Funktion für die initiale Anpassung der Hauptseite
        $('#index-mobile').live('pageinit', function(e) {
            if(window.orientation == -90) {
                $('#mainlandscape').show(1);
            } else {
                $('#mainportrait').show(1);
            }
        });
        //Funktion für die dynamische Anpassung der Hauptseite       
       $(window).bind('orientationchange', function(e) {
           if ($.mobile.activePage.attr("id") == "index-mobile") {
                //alert("orientation: " + e.orientation + "AktivePage: " + $.mobile.activePage.attr("id"));
                if(e.orientation == 'landscape') {
                    $('#mainportrait').hide(1);
                    $('#mainlandscape').show(100);
                } else {
                    $('#mainlandscape').hide(1);
                    $('#mainportrait').show(100);
                }
           }
       });
    </script>
</head> 
